<!-- 封装的地图图表组件 -->
<template>
  <div :id="this.$props.id" :style="{width:this.$props.width,height:this.$props.height}"></div>
</template>

<script>
const echarts = require("echarts");
import china from '../../assets/js/china.js';
export default {
  name: "MapChart",
  props: {
    id: String, // 画布id
    width: String, // 图表画布宽度
    height: String, // 图表画布高度
    title: String, // 主标题
    subTitle: String, // 子标题
    titleAlign: String, // 标题对齐方式
  },
  data(){
    return {
      // 配置信息
      option: {
        tooltip: {
        },
        geo: {
          tooltip: {
            show: true
          },
          map: 'china',
          roam: true
        },
        series: {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          geoIndex: 0,
          symbolSize: function (params) {
            return (params[2] / 100 * 15) + 5;
          },
          itemStyle: {
            color: '#b02a02'
          },
          encode: {
            tooltip: 2
          },
          data: [
            [488.2358421078053, 459.70913833075736, 100],
            [770.3415644319939, 757.9672194986475, 30],
            [1180.0329284196291, 743.6141808346214, 80],
            [894.03790632245, 1188.1985153835008, 61],
            [1372.98925630313, 477.3839988649537, 70],
            [1378.62251255796, 935.6708486282843, 81],
          ]
        }
      },

    }
  },
  mounted() {
    let myChart = echarts.init(document.getElementById(this.$props.id));
    myChart.setOption(this.option);
    console.log("初始化完成")
  }
}
</script>

<style scoped>

</style>